<template>
  <div class="card content-box">
    <el-form :model="formData" label-width="250px">
      <el-form-item label="驻留集个数 :">
        <el-input-number v-model="formData.num" min="0"> </el-input-number>
      </el-form-item>
      <el-form-item label="是否有快表？ :">
        <el-switch v-model="formData.form" />
      </el-form-item>
      <el-form-item label="内存存取时间:">
        <el-input v-model="formData.time" />
      </el-form-item>
      <el-form-item label="缺页中断时间:">
        <el-input v-model="formData.pause" />
      </el-form-item>
      <el-form-item label="快表时间:" v-if="formData.form">
        <el-input v-model="formData.fastform" />
      </el-form-item>
      <el-form-item label="快表与页表是否同时访问？" v-if="formData.form">
        <el-switch v-model="formData.together" />
      </el-form-item>
      <el-form-item label="逻辑地址访问序列（以空格分隔）:">
        <el-input v-model="formData.data" />
      </el-form-item>

      <el-upload class="upload-demo" drag :on-change="handleBeforeUpload" multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
      </el-upload>
      <el-form-item label="自动生成 :">
        <el-switch v-model="formData.auto" />
      </el-form-item>
      <el-form :model="formData" label-width="250px" v-if="formData.auto">
        <el-form-item label="生成地址个数:" class="flex-num">
          <div class="flex-container">
            <el-input v-model="formData.count" class="flex-item" />
            <span class="tilde">个</span>
          </div>
        </el-form-item>
        <el-form-item label="地址范围 :" class="address-input">
          <el-input v-model="formData.address1" class="flex-item"></el-input>
          <span class="tilde">~</span>
          <el-input v-model="formData.address2" class="flex-item"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="open">开始生成</el-button>
        </el-form-item>
      </el-form>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { reactive } from "vue";
import router from "@/routers";
import { useFormDataStore } from "@/stores/data/formData";

let FromDataStore = useFormDataStore();

const formData = reactive({
  data: "",
  form: false,
  fastform: "",
  num: 1,
  time: "",
  pause: "",
  count: "",
  address1: "",
  address2: "",
  together: false,
  auto: false
});
const open = () => {
  // 生成逻辑地址序列的逻辑
  const generatedData = generateData(formData.count, formData.address1, formData.address2);
  formData.data = generatedData.join(" ");
};

const generateData = (count, address1, address2) => {
  const result = [];
  for (let i = 0; i < count; i++) {
    const randomAddress = generateRandomAddress(address1, address2);
    result.push(randomAddress);
  }
  return result;
};

const generateRandomAddress = (min, max) => {
  const randomNumber = Math.floor(Math.random() * (parseInt(max, 16) - parseInt(min, 16) + 1)) + parseInt(min, 16);
  const paddedNumber = padNumber(randomNumber, max.length);
  return paddedNumber.toUpperCase(); // 转为大写字母
};

const padNumber = (number, length) => {
  return number.toString(16).padStart(length, "0");
};

const onSubmit = () => {
  FromDataStore.setFormData(formData);
  console.log(FromDataStore.getFormData);
  router.push({
    path: "/form/validateForm"
  });
  console.log(formData);
};
const handleBeforeUpload = file => {
  console.log("EEEE");
  ElMessage({
    message: "上传完毕",
    grouping: true,
    type: "success"
  });
  console.log(file);
  const reader = new FileReader();
  reader.onload = e => {
    console.log(e.target?.result);
    formData.data = e.target.result;
  };
  reader.readAsText(file.raw);
  return false; // 阻止自动上传
};
</script>

<style scoped lang="scss">
@import "./index.scss";
.address-input {
  display: flex;
}

.flex-item {
  flex: 1;
  max-width: 150px; /* Adjust the maximum width as needed */
  margin-right: 10px; /* Optional margin between the input elements */
}
.flex-num {
  flex: 1;
  max-width: 350px; /* Adjust the maximum width as needed */
  margin-right: 200px; /* Optional margin between the input elements */
}
.tilde {
  margin: 0 5px; /* Adjust margin as needed */
}
.flex-container {
  display: flex;
  align-items: center;
}
</style>
